<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .root,
        .root2 {
            width: 200px;
            height: 100%;
            float: left;
        }
        
        .root2 {
            width: 200px;
            height: 469px;
            background-color: #0066CC
        }
        
        .left {
            width: 200px;
            height: 50px;
            background-color: #57ca91;
            text-align: center;
            line-height: 50px;
            border: solid 1px rgb(78, 255, 146);
            /*float: left;*/
        }
        
        .right {
            width: 200px;
            background-color: #8ea7dd;
            /* color: rgb(220, 255, 235); */
            text-align: center;
            line-height: 50px;
            list-style: none;
            height: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="root">

    </div>
    <div class="root2">

    </div>
</body>

</html>
<script src="./jquery-3.4.1.min.js"></script>
<script>
    $.ajax({
        type: 'GET',
        url: "new_file.json",
        data: "", //设置请求的参数
        contentType: "json", //数据类型
        // 关键属性
        success: function(obj) {
            // 注意 success函数中,携带的参数是数据请求成功之后返回的json字符串!!!
            //          console.log(obj)
            Data(obj);
        },
        error: function(err) {
            // 请求失败后走的函数
            console.log(err.status)
        }
    })

    function Data(obj) {
        console.log(obj);
        for (var i in obj) {
            var objnameobj = obj[i];
            var name = objnameobj['name'];
            $(".root").html($(".root").html() + "<div class='left'>" + name + "</div>");
            $(".root2").html($(".root2").html() + "<div class='right'></div>");
            var shangArr = objnameobj["sub_categories"]
            for (var j in shangArr) {
                shangObj = shangArr[j];
                shangname = shangObj["name"];
                var hhh = $(".right").eq(i);
                hhh.html(hhh.html() + "<li class='right1'>" + shangname + "</li>");
            }

        }
        $(".right").eq(0).animate({
            height: 100 + "%",
        }, 10);
        console.log($(".left"))
        $(".left").click(function() {
            console.log($(this));
            var index = $(this).index();
            console.log(index);
            $(".right").eq(index).animate({
                height: 100 + "%",
            }, 10);
            $(".right").eq(index).siblings().animate({
                height: 0,
            }, 10);
        })
        $("li").click(function() {
                var mi = $(this).html();
                console.log(mi)
                $(this).css({
                    backgroundColor: "rgb(220, 255, 235)",
                })
                localStorage[mi] = $(this).html();

            })
        //删除
        $("li").dblclick(function() {
	console.log("双击");
	var mi = $(this).html();
	console.log(mi)
	$(this).css({
		backgroundColor: "",
	})
	if(localStorage[mi] == mi) {
		localStorage.removeItem(mi);
	}
})//ke	  
        for (var i in $("li")) {
            var b = $("li")[i];
            var c = $(b).html()
            if (localStorage[c] == c) {
                $(b).css({
                    backgroundColor: "rgb(220, 255, 235)",
                })

            }
        }


    }
</script>